<template>
  <div class="store-manage">
    <div class="box wrapper-con hidden m-t">
      <el-form :inline="true" :model="productForm" ref="productForm" class="form-inline">
        <el-form-item label="店铺名称">
          <el-input v-model="productForm.storeName" placeholder="店铺名称"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="grid-content bg-purple-light">店铺状态
            <el-select v-model="productForm.statusChoose" slot="prepend" placeholder="全部">
              <el-option label="全部" value=""></el-option>
              <el-option label="营业中" value="0"></el-option>
              <!-- <el-option label="关闭中" value="-1"></el-option>
              <!-- <el-option label="待审批" value="3"></el-option>
              <el-option label="审批未通过" value="4"></el-option> -->
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="创建时间" prop="validityPeriod">
          <el-date-picker
              v-model="productForm.startTime"
              format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
            <el-date-picker
              v-model="productForm.endTime"
              format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
          <div class="grid-content bg-purple-light">店铺类型
            <el-select v-model="productForm.storeBusinessType" slot="prepend" placeholder="全部">
              <el-option label="奢品" value="10"></el-option>
              <el-option label="餐饮" value="20"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="ajaxlist">查 询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="text" @click="cleanAll">清 空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pd20">
      <el-button type="primary" @click="createHref">创建店铺</el-button>
    </div>
    <div>排序
      <el-button type="primary" class="el-icon-d-caret" @click="timeSort">创建时间</el-button>
      <!-- <el-button type="primary" @click="excelExport">批量导出</el-button> -->
      <form  name="exportExcel" method="post" :action="downloadUrl" class="pd20">
          <input type="hidden" name="token"  :value="erpToken" />
          <input type="hidden" name="storeStatus"  :value="storeStatus" />
          <input type="hidden" name="startTime"  :value="productForm.startTime" />
          <input type="hidden" name="endTime" :value="productForm.endTime" />
          <input type="hidden" name="storeBusinessType"  :value="productForm.storeBusinessType" />
          <input type="hidden" name="orderByTime"  :value="orderByTime" />
          <button type="submit" class="el-button el-button--success">
            <i class="el-icon- el-icon-upload"></i><span>
            excal导出</span>
          </button>
      </form>
    </div>
    <div class="pd20 o-table">
      <el-table ref="multipleTable" :data="datasList" border>
        <el-table-column prop="storeCode" label="店铺编码"></el-table-column>
        <el-table-column prop="storeName" label="店铺名称"></el-table-column>
        <el-table-column prop="storeType" label="店铺类型"></el-table-column>
        <el-table-column prop="storeBannerName" label="品牌"></el-table-column>
        <el-table-column prop="inputOn" label="创建时间"></el-table-column>
        <el-table-column prop="inputBy" label="创建者"></el-table-column>
        <el-table-column prop="storeStatus" label="店铺状态"></el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
           <!-- <el-button type="primary" prop="storeSysno" @click="viewDetails(storeSysno)">查看详情{{storeSysno}}</el-button> -->
            <router-link class="color-blue" :to="['/storeInfo/']+scope.row.storeSysno">查看详情</router-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pd20" >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="page"
          :current-page="pageThis"
          :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import {mapGetters, mapActions} from 'vuex'
  export default{
    name: 'store-manage',
    data () {
      return {
        productForm: {
          startTime: '',
          endTime: '',
          storeName: '',
          selecttwo: '',
          statusChoose: '',
          storeBusinessType: ''
        },
        input: '',
        pageThis: this.$route.params.id ? Number(this.$route.params.id) : 1, // 当前第几页
        pageSize: 10, // 每页多少条
        pageTotal: 0, // 数据条数
        activeName: 'first',
        dataList: {},
        orderByTime: '',
        datasList: [],
        erpToken: '',
        storeStatus: '',
        storeSysno: '',
        downloadUrl: 'api/shop/exportStoreListExcel'
      }
    },
    computed: {
      // 映射State
      ...mapGetters([
        'apiUrl'
      ])
    },
    watch: {
      '$route.params.id': function (newe, old) {
        console.log(this.$route.params.id)
        console.log(Number(this.$route.params.id))
        this.pageThis = Number(newe)
        this.ajaxlist()
      }
    },
    methods: {
      ...mapActions([
        'getStorage'
      ]),
      handleSizeChange (val) {
        this.pageThis = val
      },
      page (val) {
        this.pageThis = val
        console.log(val)
        this.$router.push('/storeManage/' + val)
      },
      ajaxlist: function () {
        if (this.productForm.startTime === '') {
          this.productForm.startTime = this.productForm.startTime
        } else {
          this.productForm.startTime = this.productForm.startTime.Format('yyyy-MM-dd')
        }
        if (this.productForm.endTime === '') {
          this.productForm.endTime = this.productForm.endTime
        } else {
          this.productForm.endTime = this.productForm.endTime.Format('yyyy-MM-dd')
        }
        var queryForm = {
          storeName: this.productForm.storeName,
          storeStatus: this.productForm.statusChoose,
          startTime: this.productForm.startTime,
          endTime: this.productForm.endTime,
          storeBusinessType: this.productForm.storeBusinessType,
          orderByTime: this.orderByTime,
          pageNum: this.pageThis,
          pageSize: this.pageSize
        }
        axios.post('/api/shop/queryStoreList', queryForm).then((res) => {
          this.datasList = []
          if (res.data.code === 9999) {
            this.dataList = res.data.data
            var size = res.data.data
            this.datasList = []
            this.pageTotal = size.total
            size.list.forEach((item, key) => {
              var storeStatus = item.storeStatus
              switch (storeStatus) {
                case 0:
                  storeStatus = '营业中'
                  break
                case -1:
                  storeStatus = '关闭中'
                  break
              }
              this.datasList.push({
                storeCode: item.storeCode,
                storeName: item.storeName,
                storeType: item.storeType,
                storeBannerName: item.storeBannerName,
                inputOn: item.inputOn,
                inputBy: item.inputBy,
                storeStatus: item.storeStatus,
                storeSysno: item.storeSysno
              })
            })
          }
        })
      },
      excelExport () {
        if (this.productForm.startTime === '') {
          this.productForm.startTime = this.productForm.startTime
        } else {
          this.productForm.startTime = this.productForm.startTime.Format('yyyy-MM-dd')
        }
        if (this.productForm.endTime === '') {
          this.productForm.endTime = this.productForm.endTime
        } else {
          this.productForm.endTime = this.productForm.endTime.Format('yyyy-MM-dd')
        }
        var excelForm = {
          token: this.erpToken,
          storeName: this.productForm.storeName,
          storeStatus: this.productForm.statusChoose,
          startTime: this.productForm.startTime,
          endTime: this.productForm.endTime,
          storeBusinessType: this.productForm.storeBusinessType,
          orderByTime: this.orderByTime
        }
        axios.post('/api/shop/exportStoreListExcel', excelForm).then((res) => {
          if (res.data.code === 9999) {
          }
        })
      },
      timeSort () {
        if (this.orderByTime === 'ASC' || this.orderByTime === '') {
          this.orderByTime = 'DESC'
        } else {
          this.orderByTime = 'ASC'
        }
        this.ajaxlist()
      },
      cleanAll () {
        this.orderByTime = ''
        this.productForm.storeName = ''
        this.productForm.statusChoose = ''
        this.productForm.startTime = ''
        this.productForm.endTime = ''
        this.productForm.storeBusinessType = ''
        this.orderByTime = ''
        this.pageThis = 1
      },
      createHref () {
        this.$router.push('/createstore')
      }
    },
    mounted () {
      this.getStorage('erpToken').then((erpToken) => {
        this.erpToken = erpToken.replace(/"/g, '')
      }, function (error) {
        console.log(error)
      })
      this.ajaxlist()
    }
  }
</script>
<style scoped lang='less'>
.store-manage{
    margin-top:60px;
    margin-left:60px;
    .pd20{
      padding:20px;
    }
    .el-col {
      border-radius: 4px;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
    }
    .color-blue{
      color:blue;
    }
  }
</style>
